<template>
  <div>
    <div
      class="w-full h-10 text-lg m-1 border-l-4 border-l-yellow-400 flex justify-around items-center text-white"
    >
      <div
        @click="active = 'add'"
        :class="active === 'add' ? 'text-yellow-300 border-b-2 border-b-yellow-300' : ''"
      >
        上码管理
      </div>
      <div
        @click="active = 'order'"
        :class="active === 'order' ? 'text-yellow-300 border-b-2 border-b-yellow-300' : ''"
      >
        通道跑量
      </div>
      <div
        @click="active = 'info'"
        :class="active === 'info' ? 'text-yellow-300 border-b-2 border-b-yellow-300' : ''"
      >
        我的点位
      </div>
    </div>

    <collectionInfo v-if="active === 'add'" />
    <CollectionOrder v-if="active === 'order'" />
    <collectionDot v-if="active === 'info'" />
  </div>
</template>
<script setup lang="ts">
import { ref, onMounted } from 'vue'
import collectionInfo from './components/collectionInfo.vue'
import CollectionOrder from './components/CollectionOrder.vue'
import collectionDot from './components/collectionDot.vue'
import { showToast } from 'vant'
const active = ref('add')

onMounted(() => {
  showToast({
    message: '左滑可删除条目',
    duration: 1000
  })
})
</script>
